<script setup>
import MovieCard from '../components/MovieCard.vue';

const movies = [
  {
    id: 1,
    title: '创意电影',
    description: '这是创意电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/创意.jpeg'
  },
  {
    id: 2,
    title: '剧情电影',
    description: '这是剧情电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/剧情.jpeg'
  },
  {
    id: 3,
    title: '动画电影',
    description: '这是动画电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/动画.jpeg'
  },
  {
    id: 4,
    title: '励志电影',
    description: '这是励志电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/励志.jpeg'
  },
  {
    id: 5,
    title: '实验电影',
    description: '这是实验电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/实验.jpeg'
  },
  {
    id: 6,
    title: '广告电影',
    description: '这是广告电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/广告.jpeg'
  },
  {
    id: 7,
    title: '搞笑电影',
    description: '这是搞笑电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/搞笑.jpeg'
  },
  {
    id: 8,
    title: '旅行电影',
    description: '这是旅行电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/旅行.jpeg'
  },
  {
    id: 9,
    title: '时尚电影',
    description: '这是时尚电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/时尚.jpeg'
  },
  {
    id: 10,
    title: '汽车电影',
    description: '这是汽车电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/汽车.jpeg'
  },
  {
    id: 11,
    title: '混剪电影',
    description: '这是混剪电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/混剪.jpeg'
  },
  {
    id: 12,
    title: '游戏电影',
    description: '这是游戏电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/游戏.jpeg'
  },
  {
    id: 13,
    title: '爱情电影',
    description: '这是爱情电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/爱情.jpeg'
  },
  {
    id: 14,
    title: '生活电影',
    description: '这是生活电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/生活.jpeg'
  },
  {
    id: 15,
    title: '科幻电影',
    description: '这是科幻电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/科幻.jpeg'
  },
  {
    id: 16,
    title: '纪录电影',
    description: '这是纪录电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/纪录.jpeg'
  },
  {
    id: 17,
    title: '美食电影',
    description: '这是美食电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/美食.jpeg'
  },
  {
    id: 18,
    title: '运动电影',
    description: '这是运动电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/运动.jpeg'
  },
  {
    id: 19,
    title: '音乐电影',
    description: '这是音乐电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/音乐.jpeg'
  },
  {
    id: 20,
    title: '预告电影',
    description: '这是预告电影的简介',
    image: 'https://codelover.club/coursefiles/images/film/预告.jpeg'
  }
];
</script>

<template>
  <div class="container">
    <div class="movie-list">
      <MovieCard v-for="movie in movies" :key="movie.id" :movie="movie" />
    </div>
  </div>
</template>

<style scoped>
/* 容器样式 */
.container {
  margin-top: 80px;
  height: 90vh;
  overflow: hidden;
  overflow-y: auto;
  width: 410px;
  height: 830px;

}
.container::-webkit-scrollbar {
  display: none; /* 隐藏滚动条（Chrome, Safari, Edge） */
}
/* 电影列表样式 */
.movie-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}


</style>